// Apple Design System - Layout Utilities
// 响应式布局工具类系统

// 断点定义
$breakpoints: (
  xs: 0,
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  xxl: 1536px
);

// 间距单位系统 (基于8px网格)
$spacing-values: (
  0: 0,
  1: 4px,   // 0.25rem
  2: 8px,   // 0.5rem
  3: 12px,  // 0.75rem
  4: 16px,  // 1rem
  5: 20px,  // 1.25rem
  6: 24px,  // 1.5rem
  8: 32px,  // 2rem
  10: 40px, // 2.5rem
  12: 48px, // 3rem
  16: 64px, // 4rem
  20: 80px, // 5rem
  24: 96px, // 6rem
  32: 128px, // 8rem
  40: 160px, // 10rem
  48: 192px, // 12rem
  56: 224px, // 14rem
  64: 256px  // 16rem
);

// 生成间距工具类的混入
@mixin generate-spacing-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  // Margin utilities
  @each $key, $value in $spacing-values {
    .#{$class-prefix}m-#{$key} { margin: #{$value} !important; }
    .#{$class-prefix}mt-#{$key} { margin-top: #{$value} !important; }
    .#{$class-prefix}mr-#{$key} { margin-right: #{$value} !important; }
    .#{$class-prefix}mb-#{$key} { margin-bottom: #{$value} !important; }
    .#{$class-prefix}ml-#{$key} { margin-left: #{$value} !important; }
    .#{$class-prefix}mx-#{$key} { 
      margin-left: #{$value} !important; 
      margin-right: #{$value} !important; 
    }
    .#{$class-prefix}my-#{$key} { 
      margin-top: #{$value} !important; 
      margin-bottom: #{$value} !important; 
    }
  }
  
  // Padding utilities
  @each $key, $value in $spacing-values {
    .#{$class-prefix}p-#{$key} { padding: #{$value} !important; }
    .#{$class-prefix}pt-#{$key} { padding-top: #{$value} !important; }
    .#{$class-prefix}pr-#{$key} { padding-right: #{$value} !important; }
    .#{$class-prefix}pb-#{$key} { padding-bottom: #{$value} !important; }
    .#{$class-prefix}pl-#{$key} { padding-left: #{$value} !important; }
    .#{$class-prefix}px-#{$key} { 
      padding-left: #{$value} !important; 
      padding-right: #{$value} !important; 
    }
    .#{$class-prefix}py-#{$key} { 
      padding-top: #{$value} !important; 
      padding-bottom: #{$value} !important; 
    }
  }
  
  // Gap utilities
  @each $key, $value in $spacing-values {
    .#{$class-prefix}gap-#{$key} { gap: #{$value} !important; }
    .#{$class-prefix}gap-x-#{$key} { column-gap: #{$value} !important; }
    .#{$class-prefix}gap-y-#{$key} { row-gap: #{$value} !important; }
  }
  
  // 特殊值
  .#{$class-prefix}m-auto { margin: auto !important; }
  .#{$class-prefix}mx-auto { 
    margin-left: auto !important; 
    margin-right: auto !important; 
  }
  .#{$class-prefix}my-auto { 
    margin-top: auto !important; 
    margin-bottom: auto !important; 
  }
  .#{$class-prefix}mt-auto { margin-top: auto !important; }
  .#{$class-prefix}mr-auto { margin-right: auto !important; }
  .#{$class-prefix}mb-auto { margin-bottom: auto !important; }
  .#{$class-prefix}ml-auto { margin-left: auto !important; }
}

// 生成尺寸工具类的混入
@mixin generate-sizing-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  // Width utilities
  .#{$class-prefix}w-auto { width: auto !important; }
  .#{$class-prefix}w-full { width: 100% !important; }
  .#{$class-prefix}w-screen { width: 100vw !important; }
  .#{$class-prefix}w-min { width: min-content !important; }
  .#{$class-prefix}w-max { width: max-content !important; }
  .#{$class-prefix}w-fit { width: fit-content !important; }
  
  // 分数宽度
  @for $i from 1 through 12 {
    .#{$class-prefix}w-#{$i}\/12 { width: percentage($i / 12) !important; }
  }
  
  // 常用百分比
  .#{$class-prefix}w-1\/2 { width: 50% !important; }
  .#{$class-prefix}w-1\/3 { width: 33.333333% !important; }
  .#{$class-prefix}w-2\/3 { width: 66.666667% !important; }
  .#{$class-prefix}w-1\/4 { width: 25% !important; }
  .#{$class-prefix}w-3\/4 { width: 75% !important; }
  .#{$class-prefix}w-1\/5 { width: 20% !important; }
  .#{$class-prefix}w-2\/5 { width: 40% !important; }
  .#{$class-prefix}w-3\/5 { width: 60% !important; }
  .#{$class-prefix}w-4\/5 { width: 80% !important; }
  
  // Height utilities
  .#{$class-prefix}h-auto { height: auto !important; }
  .#{$class-prefix}h-full { height: 100% !important; }
  .#{$class-prefix}h-screen { height: 100vh !important; }
  .#{$class-prefix}h-min { height: min-content !important; }
  .#{$class-prefix}h-max { height: max-content !important; }
  .#{$class-prefix}h-fit { height: fit-content !important; }
  
  // 固定尺寸
  @each $key, $value in $spacing-values {
    .#{$class-prefix}w-#{$key} { width: #{$value} !important; }
    .#{$class-prefix}h-#{$key} { height: #{$value} !important; }
  }
  
  // Min/Max width
  .#{$class-prefix}min-w-0 { min-width: 0 !important; }
  .#{$class-prefix}min-w-full { min-width: 100% !important; }
  .#{$class-prefix}min-w-min { min-width: min-content !important; }
  .#{$class-prefix}min-w-max { min-width: max-content !important; }
  .#{$class-prefix}min-w-fit { min-width: fit-content !important; }
  
  .#{$class-prefix}max-w-none { max-width: none !important; }
  .#{$class-prefix}max-w-full { max-width: 100% !important; }
  .#{$class-prefix}max-w-min { max-width: min-content !important; }
  .#{$class-prefix}max-w-max { max-width: max-content !important; }
  .#{$class-prefix}max-w-fit { max-width: fit-content !important; }
  
  // Min/Max height
  .#{$class-prefix}min-h-0 { min-height: 0 !important; }
  .#{$class-prefix}min-h-full { min-height: 100% !important; }
  .#{$class-prefix}min-h-screen { min-height: 100vh !important; }
  .#{$class-prefix}min-h-min { min-height: min-content !important; }
  .#{$class-prefix}min-h-max { min-height: max-content !important; }
  .#{$class-prefix}min-h-fit { min-height: fit-content !important; }
  
  .#{$class-prefix}max-h-none { max-height: none !important; }
  .#{$class-prefix}max-h-full { max-height: 100% !important; }
  .#{$class-prefix}max-h-screen { max-height: 100vh !important; }
  .#{$class-prefix}max-h-min { max-height: min-content !important; }
  .#{$class-prefix}max-h-max { max-height: max-content !important; }
  .#{$class-prefix}max-h-fit { max-height: fit-content !important; }
}

// 生成定位工具类的混入
@mixin generate-position-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  // Position
  .#{$class-prefix}static { position: static !important; }
  .#{$class-prefix}fixed { position: fixed !important; }
  .#{$class-prefix}absolute { position: absolute !important; }
  .#{$class-prefix}relative { position: relative !important; }
  .#{$class-prefix}sticky { position: sticky !important; }
  
  // Top/Right/Bottom/Left
  @each $key, $value in $spacing-values {
    .#{$class-prefix}top-#{$key} { top: #{$value} !important; }
    .#{$class-prefix}right-#{$key} { right: #{$value} !important; }
    .#{$class-prefix}bottom-#{$key} { bottom: #{$value} !important; }
    .#{$class-prefix}left-#{$key} { left: #{$value} !important; }
  }
  
  // 特殊值
  .#{$class-prefix}top-auto { top: auto !important; }
  .#{$class-prefix}right-auto { right: auto !important; }
  .#{$class-prefix}bottom-auto { bottom: auto !important; }
  .#{$class-prefix}left-auto { left: auto !important; }
  
  .#{$class-prefix}top-1\/2 { top: 50% !important; }
  .#{$class-prefix}right-1\/2 { right: 50% !important; }
  .#{$class-prefix}bottom-1\/2 { bottom: 50% !important; }
  .#{$class-prefix}left-1\/2 { left: 50% !important; }
  
  .#{$class-prefix}top-full { top: 100% !important; }
  .#{$class-prefix}right-full { right: 100% !important; }
  .#{$class-prefix}bottom-full { bottom: 100% !important; }
  .#{$class-prefix}left-full { left: 100% !important; }
}

// 生成显示工具类的混入
@mixin generate-display-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  .#{$class-prefix}block { display: block !important; }
  .#{$class-prefix}inline-block { display: inline-block !important; }
  .#{$class-prefix}inline { display: inline !important; }
  .#{$class-prefix}flex { display: flex !important; }
  .#{$class-prefix}inline-flex { display: inline-flex !important; }
  .#{$class-prefix}grid { display: grid !important; }
  .#{$class-prefix}inline-grid { display: inline-grid !important; }
  .#{$class-prefix}table { display: table !important; }
  .#{$class-prefix}table-row { display: table-row !important; }
  .#{$class-prefix}table-cell { display: table-cell !important; }
  .#{$class-prefix}hidden { display: none !important; }
}

// 生成可见性工具类的混入
@mixin generate-visibility-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  .#{$class-prefix}visible { visibility: visible !important; }
  .#{$class-prefix}invisible { visibility: hidden !important; }
  .#{$class-prefix}opacity-0 { opacity: 0 !important; }
  .#{$class-prefix}opacity-25 { opacity: 0.25 !important; }
  .#{$class-prefix}opacity-50 { opacity: 0.5 !important; }
  .#{$class-prefix}opacity-75 { opacity: 0.75 !important; }
  .#{$class-prefix}opacity-100 { opacity: 1 !important; }
}

// 生成Z-index工具类的混入
@mixin generate-z-index-utilities($prefix: '') {
  $class-prefix: if($prefix == '', '', '#{$prefix}\\:');
  
  .#{$class-prefix}z-auto { z-index: auto !important; }
  .#{$class-prefix}z-0 { z-index: 0 !important; }
  .#{$class-prefix}z-10 { z-index: 10 !important; }
  .#{$class-prefix}z-20 { z-index: 20 !important; }
  .#{$class-prefix}z-30 { z-index: 30 !important; }
  .#{$class-prefix}z-40 { z-index: 40 !important; }
  .#{$class-prefix}z-50 { z-index: 50 !important; }
  .#{$class-prefix}z-\-1 { z-index: -1 !important; }
}

// 基础工具类
@include generate-spacing-utilities();
@include generate-sizing-utilities();
@include generate-position-utilities();
@include generate-display-utilities();
@include generate-visibility-utilities();
@include generate-z-index-utilities();

// 响应式工具类
@each $breakpoint, $min-width in $breakpoints {
  @if $min-width > 0 {
    @media (min-width: #{$min-width}) {
      @include generate-spacing-utilities($breakpoint);
      @include generate-sizing-utilities($breakpoint);
      @include generate-position-utilities($breakpoint);
      @include generate-display-utilities($breakpoint);
      @include generate-visibility-utilities($breakpoint);
      @include generate-z-index-utilities($breakpoint);
    }
  }
}

// 容器查询支持
@supports (container-type: inline-size) {
  .container-query {
    container-type: inline-size;
  }
  
  @container (min-width: 640px) {
    .cq-sm\:block { display: block !important; }
    .cq-sm\:hidden { display: none !important; }
    .cq-sm\:flex { display: flex !important; }
    .cq-sm\:grid { display: grid !important; }
  }
  
  @container (min-width: 768px) {
    .cq-md\:block { display: block !important; }
    .cq-md\:hidden { display: none !important; }
    .cq-md\:flex { display: flex !important; }
    .cq-md\:grid { display: grid !important; }
  }
  
  @container (min-width: 1024px) {
    .cq-lg\:block { display: block !important; }
    .cq-lg\:hidden { display: none !important; }
    .cq-lg\:flex { display: flex !important; }
    .cq-lg\:grid { display: grid !important; }
  }
}

// 打印样式
@media print {
  .print\:hidden { display: none !important; }
  .print\:block { display: block !important; }
  .print\:inline { display: inline !important; }
  .print\:inline-block { display: inline-block !important; }
}

// 减少动画模式
@media (prefers-reduced-motion: reduce) {
  .motion-reduce\:transform-none { transform: none !important; }
  .motion-reduce\:transition-none { transition: none !important; }
  .motion-reduce\:animate-none { animation: none !important; }
}

// 高对比度模式
@media (prefers-contrast: high) {
  .contrast-more\:border-2 { border-width: 2px !important; }
  .contrast-more\:border-4 { border-width: 4px !important; }
}

// 暗色模式工具类
@media (prefers-color-scheme: dark) {
  .dark\:block { display: block !important; }
  .dark\:hidden { display: none !important; }
  .dark\:flex { display: flex !important; }
  .dark\:grid { display: grid !important; }
}

// 安全区域支持 (iOS刘海屏等)
.safe-top { padding-top: env(safe-area-inset-top) !important; }
.safe-right { padding-right: env(safe-area-inset-right) !important; }
.safe-bottom { padding-bottom: env(safe-area-inset-bottom) !important; }
.safe-left { padding-left: env(safe-area-inset-left) !important; }

// 滚动行为
.scroll-smooth { scroll-behavior: smooth !important; }
.scroll-auto { scroll-behavior: auto !important; }

// 用户选择
.select-none { user-select: none !important; }
.select-text { user-select: text !important; }
.select-all { user-select: all !important; }
.select-auto { user-select: auto !important; }

// 指针事件
.pointer-events-none { pointer-events: none !important; }
.pointer-events-auto { pointer-events: auto !important; }

// 溢出处理
.overflow-auto { overflow: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.overflow-visible { overflow: visible !important; }
.overflow-scroll { overflow: scroll !important; }

.overflow-x-auto { overflow-x: auto !important; }
.overflow-x-hidden { overflow-x: hidden !important; }
.overflow-x-visible { overflow-x: visible !important; }
.overflow-x-scroll { overflow-x: scroll !important; }

.overflow-y-auto { overflow-y: auto !important; }
.overflow-y-hidden { overflow-y: hidden !important; }
.overflow-y-visible { overflow-y: visible !important; }
.overflow-y-scroll { overflow-y: scroll !important; }

// 文本溢出
.truncate {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.text-ellipsis { text-overflow: ellipsis !important; }
.text-clip { text-overflow: clip !important; }

// 白空间处理
.whitespace-normal { white-space: normal !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre { white-space: pre !important; }
.whitespace-pre-line { white-space: pre-line !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }

// 换行处理
.break-normal { 
  overflow-wrap: normal !important;
  word-break: normal !important; 
}
.break-words { overflow-wrap: break-word !important; }
.break-all { word-break: break-all !important; }
.break-keep { word-break: keep-all !important; }